<template>
  <div class="clientRegulate">
    <div class="titleInfo">非工作日</div>
    <div class="table">
      <el-calendar>
        <div
          slot="dateCell"
          slot-scope="{ data }"
          class="temp"
          @click="allcalendar(data)"
        >
          {{ data.day.split('-').slice(1).join('-') }}
          <div
            v-for="item in scheduleDatas"
            :key="item"
            style="width:100%;"
          >
            <el-tag
              v-if="(item.workingDay).indexOf(data.day.split('-').join('-'))!=-1"
              type="danger"
            >
              {{ item.content }}
            </el-tag>
          </div>
        </div>
      </el-calendar>
      <el-calendar>
        <div
          slot="dateCell"
          slot-scope="{ data }"
          class="temp"
          @click="allcalendar(data)"
        >
          {{ data.day.split('-').slice(1).join('-') }}
          <div
            v-for="item in scheduleData"
            :key="item"
            style="width:100%;"
          >
            <el-tag
              v-if="(item.workingDay).indexOf(data.day.split('-').join('-'))!=-1"
              type="danger"
            >
              {{ item.content }}
            </el-tag>
          </div>
        </div>
      </el-calendar>
      <el-calendar>
        <div
          slot="dateCell"
          slot-scope="{ data }"
          class="temp"
          @click="allcalendar(data)"
        >
          {{ data.day.split('-').slice(1).join('-') }}
          <div
            v-for="item in scheduleData"
            :key="item"
            style="width:100%;"
          >
            <el-tag
              v-if="(item.workingDay).indexOf(data.day.split('-').slice(2).join('-'))!=-1"
              type="danger"
            >
              {{ item.content }}
            </el-tag>
          </div>
        </div>
      </el-calendar>

      <el-calendar v-model="calendar">
        <div
          slot="dateCell"
          slot-scope="{ data }"
          class="temp"
          @click="allcalendar(data)"
        >
          <p :class="data.isSelected ? 'is-selected-1' : ''">
            {{ data.day.split("-").slice(2).join("-") }}
          </p>
        </div>
      </el-calendar>
    </div>

  </div>
</template>

<script>
// 新增和编辑的表单一样，共用一个
export default {
  name: '',
  components: {},
  data() {
    return {
      value: new Date(),
      calendar: '',
      scheduleDatas: [
        {
          workingDay: '2022-01-06',
          content: '休'
        },
        {
          workingDay: '2022-01-06',
          content: '休'
        }
      ],
      scheduleData: [
        {
          workingDay: '02',
          content: '假期'
        },
        {
          workingDay: '03',
          content: '假期'
        },
        {
          workingDay: '04',
          content: '假期'
        },
        {
          workingDay: '05',
          content: '假期'
        },
        {
          workingDay: '06',
          content: '假期'
        },
        {
          workingDay: '07',
          content: '假期'
        }
      ]
    }
  },

  watch: {},
  created() {
    this.$nextTick(() => {
      // 点击前一个月
      const prevBtn = document.querySelector(
        '.el-calendar__button-group .el-button-group>button:nth-child(1)'
      )
      prevBtn.addEventListener('click', e => {
        const d = new Date(this.timeValue)
        const resDate1 = d.getFullYear() + '-' + this.handleTime(d.getMonth() + 1) // 2020-08
        var unn = resDate1.split('-')
        // alert(unn)
        console.log(unn[0])
        console.log(unn[1])
        this.giveTake(unn[0], unn[1])
      })
      // 点击下一个月
      const nextBtn = document.querySelector(
        '.el-calendar__button-group .el-button-group>button:nth-child(3)'
      )
      nextBtn.addEventListener('click', e => {
        const d = new Date(this.timeValue)
        const resDate2 = d.getFullYear() + '-' + this.handleTime(d.getMonth() + 1) // 2020-10
        var unn = resDate2.split('-')
        // alert(unn)
        console.log(unn[0])
        console.log(unn[1])
        this.giveTake(unn[0], unn[1])
      })
      // 点击今天
      const todayBtn = document.querySelector(
        '.el-calendar__button-group .el-button-group>button:nth-child(2)'
      )
      todayBtn.addEventListener('click', e => {
        const d = new Date(this.timeValue)
        const resDate3 = d.getFullYear() + '-' + this.handleTime(d.getMonth() + 1) // 2020-09
        // var unn = resDate3.split("-")
        // alert(unn)
        console.log(resDate3)
        // console.log(unn[1])
        const nowDate = new Date()
        const date = {
          year: nowDate.getFullYear(),
          month: nowDate.getMonth() + 1,
          date: nowDate.getDate()
        }
        this.giveTake(date.year.toString(), date.month.toString())
      })
    })
  },
  mounted() {
    // 初始化调用接口
    // this.adminOption()
  },
  methods: {
    // 处理时间
    handleTime(s) {
      return s < 10 ? '0' + s : s
    },
    allcalendar(data) {
      this.calendar = data.day
      alert(this.calendar)
    }
  }
}
</script>

<style lang="scss" scoped>
.el-calendar-day {
  box-sizing: border-box;
  padding: 5px;
  height: 80px;
}

.el-calendar {
  text-align: center;
}

.temp {
  padding: 20px;
}

.is-selected-1 {
  width: 100%;
  height: 100%;
}

.titleInfo {
  margin-top: 20px;
  margin-left: 20px;
}

.table {
  background: #ffffff;
  border-radius: 10px;
  margin-top: 20px;
  padding-bottom: 20px;
  margin-left: 20px;
  margin-right: 20px;
}
</style>

